<template>
  <view class="orders">
    <view v-if="orders.length!==0">
      <view v-for="order in orders" :key="order.uid" class="order" @click="toOrderDetails(order.uid)">
        <view class="order-title">
          <p class="order-title-time">下单时间:{{ order.created_at.replace(/-/g,'/') }}</p>
          <view
            :class="'order-title-statu ' + order.status_display"
          >{{ statusView(order.status_display) }}</view>
        </view>
        <view class="order-content">
          <view class="order-content-left">
            <image class="order-content-left-image" :src="order.cover_display" />
          </view>
          <view class="order-content-right">
            <view class="order-content-right-top">{{ order.product }}</view>
            <view class="order-content-right-bottom">{{ order.package }}</view>
          </view>
        </view>
        <view class="order-out-time">
          <view>出行时间：{{ order.target_at | formatDate }}</view>
          <view>￥{{ order.payment_amount }}</view>
        </view>
        <view v-if="order.status_display === 'UNPAID'" class="order-bottom">
          <button class="order-bottom-btn" @click.stop="toPlay(order)">前往付款</button>
        </view>
      </view>
    </view>
    <view v-else>
      <defaultPage :content="content" />
    </view>
  </view>
</template>
<script>
import { ticketPayment } from '@api/order'
import { showToast } from '@utils/myApproach'
import defaultPage from '@com/default'
export default {
  components: {
    defaultPage
  },
  filters: {
    formatDate(data) {
      return data.slice(0, 4) + ' 年 ' + data.slice(5, 7) + ' 月 ' + data.slice(8, 10) + ' 日 '
    }
  },
  props: {
    orders: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data(props) {
    return {
      isShow: false
    }
  },
  computed: {
    content() {
      const data = {
        url: '../static/image/default/order_list.png',
        text: '您没有任何订单信息。',
        button: {
          display: false,
          text: ''
        }
      }
      return data
    }
  },
  methods: {
    toOrderDetails(uid) {
      uni.navigateTo({
        url: `/pages/mine/self/orderDetails?uid=${uid}`
      })
    },
    toPlay(order) {
      ticketPayment('selfOrder', order.uid)
        .then((res) => {
          this.query = res.data.data
        })
        .then((res) => {
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: String(this.query.timeStamp),
            nonceStr: this.query.nonceStr,
            package: this.query.package,
            signType: this.query.signType,
            paySign: this.query.paySign,
            success: (res) => {
              console.log(order)
              console.log(res)
              console.log(33333)
              uni.redirectTo({
                url: `/pages/payment/paymentOrder?query=${JSON.stringify(
                  order
                )}`
              })
            },
            fail: () => {
              showToast('未支付成功，请及时支付订单')
            }
          })
        })
    },

    // 状态标签
    statusView(status_value) {
      switch (status_value) {
        case 'UNPAID':
          return '待付款'
        case 'NORMAL':
          return '可使用'
        case 'PROCESS':
          return '处理中'
        case 'CLOSE':
          return '已关闭'
        case 'REFUND':
          return '已退款'
        case 'COMPLETED':
          return '已完成'
        default:
          return '未定义'
      }
    }
  }
}
</script>
<style lang='scss'>
/* 外层容器 */
.orders {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #f8f8f8;
}
.order {
  width: 710rpx;
  margin: 20rpx 30rpx 0rpx 30rpx;
  box-sizing: border-box;
  padding: 30rpx 30rpx 10rpx 30rpx;

  border-radius: 8rpx;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  font-size: 24rpx;

  background-color: #ffffff;
}

.order-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-title-statu {
  width: 124rpx;
  height: 50rpx;
  border-radius: 25rpx 0 0 25rpx;

  text-align: center;
  line-height: 50rpx;

  font-size: 28rpx;
  color: #ffffff;

  transform: translateX(30rpx);
}
.UNPAID {
  background-color: #f86c6c;
}
.statu-green {
  background-color: #2dcc79;
}
.statu-orange {
  background-color: #ffa459;
}
.CLOSE {
  background-color: $uni-status-close-color;
}
.REFUND {
  background-color: $uni-status-refund-color;
}

.order-content {
  height: 168rpx;
  margin: 20rpx 0 20rpx 0;
  display: flex;
}
.order-content-left-image {
  height: 100%;
  width: 200rpx;
  object-fit: cover;
}

.order-content-right {
  height: 168rpx;
  box-sizing: border-box;
  flex: 1;
  padding: 0 10rpx;
  margin-left: 20rpx;

  font-size: 32rpx;

  display: flex;
  flex-direction: column;
}
.order-content-right-top {
  font-size: 32rpx;
  font-weight: 500;
}
.order-content-right-bottom {
  font-size: 28rpx;
  color: #306de9;
  margin-top: 20rpx;
}
.order-content-right-bottom > font:nth-child(2) {
  color: #dd3939;
}
// 出行时间和价格
.order-out-time {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
}
.order-out-time>view:nth-child(2){
  font-size: 32rpx;
  font-size: 800;
}
.order-bottom {
  position: relative;
  z-index: 100;
  width: 710rpx;
  height: 130rpx;
  box-sizing: border-box;

  padding-top: 30rpx;
  padding-left: calc(100% - 142rpx);
  padding-right: 30rpx;

  border-top: 1px solid #f1f1f1;
  transform: translateX(-30rpx);
}

.order-bottom-btn {
  width: 172rpx;
  height: 64rpx;

  border: 1px solid #306de9;
  color: #306de9;
  font-size: 28rpx;
  line-height: 64rpx;
  background-color: transparent;
}
</style>
